﻿@{
	ViewBag.Title = "Отработанное время";
}

<style>
	#formData {
		display: none;
	}

	.descr {
		font-weight: bold;
	}
</style>

<h2>Отработанное время</h2>

<hr />



<div id="preLoad">
	Запрос данных с сервера
</div>

<div id="formData">
	<table class="table table-hover">
		<tr>
			<td class="descr">Размер оплаты без штрафов</td>
			<td id="mustPay"></td>
		</tr>
		<tr>
			<td class="descr">
				Фактическая оплата
			</td>
			<td id="factPay"></td>
		</tr>
		<tr>
			<td class="descr">
				Штраф
			</td>
			<td id="penalties"></td>
		</tr>
		<tr>
			<td class="descr">
				Комментарий
			</td>
			<td id="comment"></td>
		</tr>
	</table>

	@*<div class="form-group">
		<div class="control-label col-md-3 descr">
			Размер оплаты без штрафов
		</div>
		<div class="col-md-9" id="mustPay">
		</div>
	</div>*@
	@*<div class="form-group panel">
		<div class="control-label col-md-3 descr">
			Фактическая оплата
		</div>
		<div class="col-md-9" id="factPay">
		</div>
	</div>

	<div class="form-group">
		<div class="control-label col-md-3 descr">
			Штраф
		</div>
		<div class="col-md-9" id="penalties">
		</div>
	</div>

	<div class="form-group">
		<div class="control-label col-md-3 descr">
			Комментарий
		</div>
		<div class="col-md-9" id="comment">
		</div>
	</div>*@
</div>

@section scripts {
	<script>
		var apiPaymentsUrl = "/RestApp.UI/api/PaymentsApi"
            , idGraphic = @ViewData["idGraphic"];

		$(document).ready(function () {
			$.ajax({
				url: apiPaymentsUrl,
				data: { idGraphic: idGraphic },
				type: "GET",
				beforeSend: function() {
					$("#formData").hide();
					$("#preLoad").show();
				},
				error: function() {
					alert("Извините, произошла ошибка. Пожалуйста, обновите страницу.");
				},
				success: function(data) {
					$("#preLoad").hide();

					if(!data) {
						alert("Данные с сервера не получены, пожалуйста, попробуйте обновить страницу");
						return;
					}
					$("#formData").fadeIn(100);

					$("#mustPay").html(data.MustPay);
					$("#factPay").html(data.FactPay);
					$("#penalties").html(data.Penalties)
					$("#comment").html(data.Comment);
				}
			});
		})
	</script>
}
